// json 数据 
var navs = [
  "Xiaomi手机",
  "Redmi手机",
  "手机配件",
  "电脑平板",
  "智能穿戴",
  "电视",
  "大家电",
  "小家电",
  "智能家居",
  "出行运动",
  "日用百货",
  "儿童用品",
  "有品精选"
]

var leftNav = document.querySelector(".left-nav")
// 动态渲染，并绑定点击事件
navs.forEach((element, index) => {
  let div = document.createElement("div")
  div.innerHTML = element
  if (index == 0) div.className = "current" // 默认第一个添加类名
  leftNav.appendChild(div)
});

var con = document.querySelectorAll(".con")
for (let i = 0; i < con.length; i++) {
  con[i].style.display = "none"
}
con[0].style.display = "block"

var lists = document.querySelectorAll(".left-nav div")
console.log(lists);
for (let i = 0; i < lists.length; i++) {
  lists[i].addEventListener("click", function () {
    for (let j = 0; j < lists.length; j++) {
      con[j].style.display = "none"
      lists[j].className = ""
    }
    lists[i].className = "current"
    con[i].style.display = "block"
  });

}